import { useSchedules } from '@/services/dashboard';
import {
  Avatar, Descriptions, Result, Space, Spin, Steps,
  Tooltip,
} from 'antd';
import { SCHEDULE_STATUS } from '@/utils/constance';
import style from './index.module.less';

interface IProps {
  day:string
}

/**
* 某一天的课程表
*/
const Schedule = ({
  day,
}:IProps) => {
  // 获取当天的课程表
  const { data, loading } = useSchedules(day);
  if (data?.length === 0) {
    return <Result title="暂无课程信息" status="warning" />;
  }
  return (
    <Spin spinning={loading}>
      {/* 步骤条 */}
      <Steps
        direction="vertical"
        items={
            data?.map((item) => ({
              title: `${item.startTime}-${item.endTime} ${item.course.name}`,
              description: (
                <Descriptions bordered>
                  <Descriptions.Item label="讲师" span={3}>
                    {
                            item.course.teachers.map((teacher) => (
                              <Space key={teacher.id}>
                                <Avatar shape="square" size="small" src={teacher.photoUrl} />
                                {teacher.name}
                              </Space>
                            ))
                        }
                  </Descriptions.Item>
                  <Descriptions.Item
                    label={`学员(${item.scheduleRecords.length})`}
                    span={3}
                    labelStyle={{ width: 95 }}
                  >
                    { item.scheduleRecords.length === 0 && '暂无学员预约' }
                    <Avatar.Group
                      maxCount={10}
                      maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
                    >
                      {
                            item.scheduleRecords.map((sr) => (
                              <Tooltip
                                key={sr.id}
                                title={sr.student.name + (sr.status === SCHEDULE_STATUS.CANCEL ? '：已取消' : '')}
                              >
                                <Avatar key={sr.student.id} size="small" src={sr.student.avatar} />
                              </Tooltip>
                            ))
                        }
                    </Avatar.Group>
                  </Descriptions.Item>
                </Descriptions>
              ),
            }))
        }
      />
    </Spin>
  );
};

export default Schedule;
